<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>我的关注</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style>
        .app {
            margin-bottom: 1rem;
        }

        .van-hairline--top-bottom::after,
        .van-hairline-unset--top-bottom::after {
            border: 0;
        }

        .van-tab {
            padding: 0 0.08rem;
        }

        .dynamic .dynamic-f3 .videoStyle {
            width: 1rem;
            height: 1rem;
        }

        .dynamic .dynamic-f3 .doubleImg {
            width: 2rem;
            height: 2rem;
        }

        .video_box {
            position: relative;
            margin-right: .1rem;
            margin-bottom: .1rem;
        }

        .video_box .playIcon {
            color: #3F8CEC;
            font-size: .5rem;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .video_box .playIcon>img {
            width: .5rem;
            height: .5rem;
        }
    </style>
</head>

<body>
    <div class="app" v-cloak>
        <div class="dynamic" v-for="(item, index) in dynamicList" :key="index" @click="goPage(item)">
            <div class="dynamic-f1 flex-x-sb">
                <div class="info flex-x-s">
                    <img style="border-radius: 50%;"
                        :src="item.headImg?item.headImg:'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/circle/man-avatar.png'" alt="">
                    <div class="name">
                        <div>{{item.nickName}}</div>
                        <div class="datetime">{{item.publishTime}}</div>
                    </div>
                </div>
                <div class="follow" :class="{followed:item.attentionFlag}" @click.stop="doFollow(item)">
                    {{item.attentionFlag ? '已关注' : '关注ta'}}
                </div>
            </div>
            <div class="dynamic-f2">
                {{item.content}}
            </div>
            <div class="dynamic-f3 flex-x-s flex-wrap">
                <div v-for="(it,idx) in item.medias" :key="idx">
                    <div class="video_box videoStyle" :class="{doubleImg:item.medias && item.medias.length===1}"
                        v-if="it.mediaType === '0'">
                        <img :src="it.imagePath" alt="" :class="{doubleImg:item.medias && item.medias.length===1}"
                            @click.stop="preview(idx,item.medias)">
                    </div>
                    <div v-if="it.mediaType === '1'" :class="{doubleImg:item.medias && item.medias.length===1}"
                        class="video_box videoStyle" :id="'imagePath'+index"
                        @click.stop="videoPreview(it, index, it.imagePath)">
                        <img :src="it.imagePath" alt="" :class="{doubleImg:item.medias && item.medias.length===1}">
                        <span class="iconfont playIcon">
                            <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/playV.png" alt="">
                        </span>
                    </div>
                </div>
            </div>
            <div class="dynamic-f4"></div>
            <div class="dynamic-f5 flex-x-s">
                <div class="comment flex-x-s">
                    <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/comment.png" alt="">
                    <span>{{item.commentNumber == 0 ? '评论' : item.commentNumber}}</span>
                </div>
                <div class="flex-x-s thumb" @click.stop="doThumb(item)">
                    <img :src="item.likeFlag?'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/thumb_active.png' : 'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/thumb_no.png'" alt="">
                    <span>{{item.likeNumber == '0' ? '点赞' : item.likeNumber}}</span>
                </div>
            </div>
        </div>
        <div class="collect-empty" v-if="dynamicList&&dynamicList.length==0">
            <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/empty/empty.png" alt="">
            <div>暂无内容～</div>
        </div>

        <script src="../../script/api.js"></script>
        <script src="../../script/flexible.js"></script>
        <script src="../../script/fastclick.js"></script>
        <script src="../../script/vue.min.js"></script>
        <script src="../../script/iconfont.js"></script>
        <script src="../../script/common.js"></script>
        <script src="../../script/vant.min.js"></script>
        <script src="../../script/restful.js"></script>
        <script src="../../script/businessCommon.js"></script>
        <script src="../../script/BigPicture.js"></script>

        <script>
            apiready = function () {
                var photoBrowser = api.require('photoBrowser');
                vm = new Vue({
                    el: '.app',
                    data: {
                        queryInfo: {
                            pageNum: 1,
                            pageSize: 10
                        },
                        dynamicList: [],
                        hasNext: true,
                        viodePreview: null
                    },
                    created() {},
                    mounted() {
                        this.initMyNews();
                    },
                    methods: {
                        preview(index, medias) {
                            previewPhoto(index, medias, photoBrowser)
                        },
                        initMyNews() {
                            var vm = this;
                            circle('initMyNews')(vm.queryInfo, function (ret) {
                                if (vm.queryInfo.pageNum == 1) {
                                    vm.dynamicList = ret.data.list;
                                } else {
                                    vm.dynamicList = vm.dynamicList.concat(ret.data.list);
                                }
                                vm.hasNext = ret.data.hasNext
                                console.log("数据：" + JSON.stringify(vm.dynamicList));
                            })
                        },
                        doFollow(item) {
                            var vm = this;
                            circle("doFollow")(item, function (ret) {
                                vm.initMyNews();
                                item.attentionFlag = !item.attentionFlag;

                            })

                        },
                        doThumb(item) {
                            var vm = this;
                            circle("doThumb")(item, function (ret) {
                                item.likeFlag = !item.likeFlag;

                                console.log(item.likeFlag)

                                if (item.likeFlag === true) {
                                    item.likeNumber += 1;
                                    toastMiddle('点赞成功')
                                } else {
                                    item.likeNumber -= 1;
                                    toastMiddle('取消点赞')

                                }
                                vm.initMyNews();
                            })
                        },
                        goPage(item) {
                            api.openWin({
                                name: 'circle_detail_win',
                                url: 'circle_detail_win.html',
                                bounces: false,
                                pageParam: {
                                    topicId: item.topicId,
                                    // topicId: item.topicId,
                                    // newsImg: item.imagePath || '',
                                    // toUserId: item.userId,
                                    // topicCommentId: item.topicCommentId,
                                    // likeNumber: item.likeNumber,
                                    // commentNumber: item.commentNumber,
                                    // topic: item
                                }
                            });
                        },

                        /**
                         * 视频预览
                         * @param item
                         * @param index
                         */
                        videoPreview: function (item, index) {
                            let _this = this
                            if (!item.videoPath) {
                                common("getVideoPlay")(item.videoId, function (ret) {
                                    let videoData = ret.data
                                    if (videoData && videoData.playInfoList.length > 0) {
                                        let playUrl = videoData.playInfoList[0].playURL
                                        api.openVideo({
                                            url: playUrl
                                        });
                                    } else {
                                        // toastMiddle('视频转码中！')
                                        return false
                                    }
                                })
                            } else {
                                api.openVideo({
                                    url: item.videoPath
                                });
                            }
                        },

                    },
                })
                // 下拉刷新
                api.setRefreshHeaderInfo({
                    bgColor: '#f7f7f7',
                    textDown: '下拉更新有惊喜',
                    textUp: '松开可以刷新'
                }, function (ret, err) {
                    vm.pageNum = 1;
                    vm.initMyNews();
                    api.refreshHeaderLoadDone()
                });
                // 上拉加载
                api.addEventListener({
                    name: 'scrolltobottom',
                    extra: {
                        threshold: -10
                    }
                }, function (ret, err) {
                    console.log('上拉加载')
                    if (vm.hasNext) {
                        vm.queryInfo.pageNum++
                        vm.initMyNews();
                    }
                });
                api.addEventListener({
                    name: 'eventCircleClosePhoto'
                }, function (ret, err) {
                    if (document.getElementById("bp_container")) {
                        vm.viodePreview.close()
                    }
                    photoBrowser.close();
                });
            }
        </script>
    </div>
</body>

</html>